<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initialscale=1, minimum-scale=1">
<title>Summer Film Festival - Tickets</title>
<link href="stijl/html5reset.css" rel="stylesheet" type="text/css">
<link href="stijl/algemeen.css" rel="stylesheet" type="text/css">
<link href="stijl/tickets.css" rel="stylesheet" type="text/css">
<link rel="icon" href="beeld/film_factory_logo_geen_letters.png">
<script src="scripts/jquery.js"></script>
<script src="scripts/algemeen.js" type="application/javascript"></script>
<script src="scripts/tickets.js" type="text/javascript"></script>
</head>

<body onLoad="laadPrijzen(); updateAfrekening(); toggleAdres();">
<!-- 
laadPrijzen() zet de juiste prijzen bij de juiste tickets
bij reload (F5) kan het zijn dat sommige veldjes nog zijn ingevuld, daarom ook even updateAfrekening() en toggleAdres voor de zekerheid
-->
<header>
		<a href="#"><img id="menu_knop_mobiel" onclick="gaNaarNav()" alt="menu toggle" src="beeld/menu_knop_mobiel.png" height="70" width="70"/></a>
        
        <h1 id="titel">
            <a id="titel_link" href="index.html">Summer Film Festival</a>
            <!--SUMMER FILM FESTIVAL-->
        </h1>
        
        <nav id="navigatie_desktop">
            <ul>
                <a href="index.html"><li id="home">Home</li></a>
                <a href="overzicht.html"><li id="programmatie">Programme</li></a>
                <a href="contact.html"><li>Contact</li></a>
                <a href="tickets.html"><li id="tickets">Tickets</li></a>
            </ul>
        </nav>
        
        <nav id="mobiele_navigatie">
            <ul>
                <a href="index.html"><li id="home_mobiel">Home</li></a>
               	<a href="overzicht.html"><li id="programmatie_mobiel">Programme</li></a>
                <a href="contact.html"><li>Contact</li></a>
                <a href="tickets.html"><li id="tickets_mobiel">Tickets</li></a>
            </ul>
        </nav>
</header>

<div id="inhoud">
	<h2>SFF Ticketing service</h2>
    <p>On this page you can order tickets according to our different formulas:</p>
    <ul>
    	<li>The movie formula:<br />One ticket allows you to watch one movie, irregardles of day or category.</li>
        <li>The day formula:<br />One ticket allows you to watch all the movies on a chosen day.</li>
        <li>The category formula:<br />One ticket allows you to watch all the movies of a chosen category.</li>
        <li>The full formula:<br />One full access ticket allows you to watch all movies, the whole weekend.</li>
        <li>Children under 12 years old get an automatic reduction of <span id="korting">10</span>%.</li>
    </ul>
    <br />
	<form action="thanks.html" onSubmit="maakMail();">
    	<fieldset>
        	<legend>Movie formula (<span id="prijsFilm">8</span> euro per ticket)</legend>
            	<div class="label">
                    <label for="movie_tickets">Movie tickets:</label>
                    <input type="number" id="movie_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" /><br/>
                </div>
                <p class="error marge" id="err_movie_tickets">Invalid amount!</p>
        </fieldset>
        <fieldset>
        	<legend>Day formula (<span id="prijsDag">65</span> euro per ticket)</legend>
            	<div class="label">
                    <label for="friday_tickets">Friday tickets:</label>
                    <input type="number" id="friday_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                    </div>
                    <p class="error marge" id="err_friday_tickets">Invalid amount!</p>
                <div class="label">
                    <label for="saturday_tickets">Saturday tickets:</label>
                    <input type="number" id="saturday_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error" id="err_saturday_tickets">Invalid amount!</p>
                <div class="label">
                    <label for="sunday_tickets">Sunday tickets:</label>
                    <input type="number" id="sunday_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error marge" id="err_sunday_tickets">Invalid amount!</p>
        </fieldset>
        <fieldset>
        	<legend>Category formula (<span id="prijsCat">55</span> euro per ticket)</legend>
            	<div class="label">
                    <label for="klass_tickets">Tickets 'classics':</label>
                    <input type="number" id="klass_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error marge" id="err_klass_tickets">Invalid amount!</p>
                <div class="label">
                    <label for="cult_tickets">Tickets 'cult':</label>
                    <input type="number" id="cult_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error marge" id="err_cult_tickets">Invalid amount!</p>
                <div class="label">
                    <label for="pop_tickets">Tickets 'popular':</label>
                    <input type="number" id="pop_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error marge" id="err_pop_tickets">Invalid amount!</p>
        </fieldset>
        <fieldset>
        	<legend>Full formula (<span id="prijsFull">170</span> euro)</legend>
            	<div class="label">
                    <label for="full_tickets">Full access tickets:</label>
                    <input type="number" id="full_tickets" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error marge" id="err_full_tickets">Invalid amount!</p>
        </fieldset>
        <fieldset>
        	<legend>Reduction (if applicable)</legend>
            	<div class="label">
                    <label for="red_kinderen">Number of children:</label>
                    <input type="number" id="red_kinderen" value="0" min="0" onFocus="this.select();" onChange="updateAfrekening();" onKeyUp="updateAfrekening();" />
                </div>
                <p class="error marge" id="err_red_kinderen">Invalid amount!</p>
        </fieldset>
        <fieldset>
        	<legend>Contact details</legend>
            	<div class="contact_labels">
                    <label for="naam">Name: <span class="verplicht">*</span></label>
                    <input type="text" id="naam" required/>
                    <p class="error marge" id="err_naam"></p>
                    <br/><br/>           
                    <label for="email">E-mail: <span class="verplicht">*</span></label>
                    <input type="email" id="email" required/><br/><br/>                
                    <label for="telnr">Phone number:</label>
                    <input type="tel" id="telnr" /><br/><br/>
                    <p class="klein">Please include country code when entering a phone number outside of Belgium</p>
                    <input type="checkbox" id="per_post" onChange="toggleAdres()">I would like my tickets sent to me by post.
                    <br/><br/>
                    <div class="adres">
                    <fieldset>
                    	<legend>Address</legend>
                        
                        <div>
                        	<div><label for="adres_straat">Street name: <span class="verplicht">*</span></label></div>
                                <div><input type="text" id="adres_straat" /></div>
								<div>
                                    <span><label for="adres_huisnr">Nr: <span class="verplicht">* </span></label><input type="text" id="adres_huisnr" /></span>
                                    <span><label for="adres_bus">Box nr: </label><input type="text" id="adres_bus" /></span>
                                </div>
                        </div>    
                        <div>
                        	<div><label for="adres_lijn2">Address line 2:</label></div>
                            <div><input type="text" id="adres_lijn2" /></div>
                        </div>
                        <div class="plaatsdetails">
                        	<div><label for="adres_stad">City: <span class="verplicht">*</span></label></div>
                            <div><input type="text" id="adres_stad" /></div>
                        </div>
                        <div class="plaatsdetails">
                            <div><label for="adres_regio">State / Province / Region: <span class="verplicht">*</span></label></div>
                            <div><input type="text" id="adres_regio" /></div>
                        </div>
                        <div class="plaatsdetails">
                        	<div><label for="adres_postcode">Postal / Zip Code: <span class="verplicht">*</span></label></div>
                            <div><input type="text" id="adres_postcode" /></div>
                        </div>
                        <div class="plaatsdetails">
                            <div><label for="adres_land">Country: <span class="verplicht">*</span></label></div>
                            <div><select id="adres_land">
									<option value="" selected="selected"></option>
									<option value="Afghanistan" >Afghanistan</option>
									<option value="Åland Islands" >Åland Islands</option>
									<option value="Albania" >Albania</option>
									<option value="Algeria" >Algeria</option>
									<option value="American Samoa" >American Samoa</option>
									<option value="Andorra" >Andorra</option>
									<option value="Angola" >Angola</option>
									<option value="Anguilla" >Anguilla</option>
									<option value="Antarctica" >Antarctica</option>
									<option value="Antigua and Barbuda" >Antigua and Barbuda</option>
									<option value="Argentina" >Argentina</option>
									<option value="Armenia" >Armenia</option>
									<option value="Aruba" >Aruba</option>
									<option value="Austria" >Austria</option>
									<option value="Azerbaijan" >Azerbaijan</option>
									<option value="Bahamas" >Bahamas</option>
									<option value="Bahrain" >Bahrain</option>
									<option value="Bangladesh" >Bangladesh</option>
									<option value="Barbados" >Barbados</option>
									<option value="Belarus" >Belarus</option>
									<option value="Belgium" >Belgium</option>
									<option value="Belize" >Belize</option>
									<option value="Benin" >Benin</option>
									<option value="Bermuda" >Bermuda</option>
									<option value="Bhutan" >Bhutan</option>
									<option value="Bolivia" >Bolivia</option>
									<option value="Bosnia and Herzegovina" >Bosnia and Herzegovina</option>
									<option value="Botswana" >Botswana</option>
									<option value="British Indian Ocean Territory" >British Indian Ocean Territory</option>
									<option value="Brunei Darussalam" >Brunei Darussalam</option>
									<option value="Bulgaria" >Bulgaria</option>
									<option value="Burkina Faso" >Burkina Faso</option>
									<option value="Burundi" >Burundi</option>
									<option value="Cambodia" >Cambodia</option>
									<option value="Cameroon" >Cameroon</option>
									<option value="Cape Verde" >Cape Verde</option>
									<option value="Cayman Islands" >Cayman Islands</option>
									<option value="Central African Republic" >Central African Republic</option>
									<option value="Chad" >Chad</option>
									<option value="Chile" >Chile</option>
									<option value="China" >China</option>
									<option value="Colombia" >Colombia</option>
									<option value="Comoros" >Comoros</option>
									<option value="Democratic Republic of the Congo" >Democratic Republic of the Congo</option>
									<option value="Republic of the Congo" >Republic of the Congo</option>
									<option value="Cook Islands" >Cook Islands</option>
									<option value="Costa Rica" >Costa Rica</option>
									<option value="C&ocirc;te d'Ivoire" >C&ocirc;te d'Ivoire</option>
									<option value="Croatia" >Croatia</option>
									<option value="Cuba" >Cuba</option>
									<option value="Cyprus" >Cyprus</option>
									<option value="Czech Republic" >Czech Republic</option>
									<option value="Denmark" >Denmark</option>
									<option value="Djibouti" >Djibouti</option>
									<option value="Dominica" >Dominica</option>
									<option value="Dominican Republic" >Dominican Republic</option>
									<option value="East Timor" >East Timor</option>
									<option value="Ecuador" >Ecuador</option>
									<option value="Egypt" >Egypt</option>
									<option value="El Salvador" >El Salvador</option>
									<option value="Equatorial Guinea" >Equatorial Guinea</option>
									<option value="Eritrea" >Eritrea</option>
									<option value="Estonia" >Estonia</option>
									<option value="Ethiopia" >Ethiopia</option>
									<option value="Faroe Islands" >Faroe Islands</option>
									<option value="Fiji" >Fiji</option>
									<option value="Finland" >Finland</option>
									<option value="Gabon" >Gabon</option>
									<option value="Gambia" >Gambia</option>
									<option value="Georgia" >Georgia</option>
									<option value="Germany" >Germany</option>
									<option value="Ghana" >Ghana</option>
									<option value="Gibraltar" >Gibraltar</option>
									<option value="Greece" >Greece</option>
									<option value="Grenada" >Grenada</option>
									<option value="Guatemala" >Guatemala</option>
									<option value="Guinea" >Guinea</option>
									<option value="Guinea-Bissau" >Guinea-Bissau</option>
									<option value="Guyana" >Guyana</option>
									<option value="Haiti" >Haiti</option>
									<option value="Honduras" >Honduras</option>
									<option value="Hong Kong" >Hong Kong</option>
									<option value="Hungary" >Hungary</option>
									<option value="Iceland" >Iceland</option>
									<option value="Indonesia" >Indonesia</option>
									<option value="Iran" >Iran</option>
									<option value="Iraq" >Iraq</option>
									<option value="Ireland" >Ireland</option>
									<option value="Israel" >Israel</option>
									<option value="Italy" >Italy</option>
									<option value="Jamaica" >Jamaica</option>
									<option value="Japan" >Japan</option>
									<option value="Jordan" >Jordan</option>
									<option value="Kazakhstan" >Kazakhstan</option>
									<option value="Kenya" >Kenya</option>
									<option value="Kiribati" >Kiribati</option>
									<option value="North Korea" >North Korea</option>
									<option value="South Korea" >South Korea</option>
									<option value="Kuwait" >Kuwait</option>
									<option value="Kyrgyzstan" >Kyrgyzstan</option>
									<option value="Laos" >Laos</option>
									<option value="Latvia" >Latvia</option>
									<option value="Lebanon" >Lebanon</option>
									<option value="Lesotho" >Lesotho</option>
									<option value="Liberia" >Liberia</option>
									<option value="Libya" >Libya</option>
									<option value="Liechtenstein" >Liechtenstein</option>
									<option value="Lithuania" >Lithuania</option>
									<option value="Luxembourg" >Luxembourg</option>
									<option value="Macedonia" >Macedonia</option>
									<option value="Madagascar" >Madagascar</option>
									<option value="Malawi" >Malawi</option>
									<option value="Malaysia" >Malaysia</option>
									<option value="Maldives" >Maldives</option>
									<option value="Mali" >Mali</option>
									<option value="Malta" >Malta</option>
									<option value="Marshall Islands" >Marshall Islands</option>
									<option value="Mauritania" >Mauritania</option>
									<option value="Mauritius" >Mauritius</option>
									<option value="Mexico" >Mexico</option>
									<option value="Micronesia" >Micronesia</option>
									<option value="Moldova" >Moldova</option>
									<option value="Monaco" >Monaco</option>
									<option value="Mongolia" >Mongolia</option>
									<option value="Montenegro" >Montenegro</option>
									<option value="Morocco" >Morocco</option>
									<option value="Mozambique" >Mozambique</option>
									<option value="Myanmar" >Myanmar</option>
									<option value="Namibia" >Namibia</option>
									<option value="Nauru" >Nauru</option>
									<option value="Nepal" >Nepal</option>
									<option value="Netherlands" >Netherlands</option>
									<option value="Netherlands Antilles" >Netherlands Antilles</option>
									<option value="Nicaragua" >Nicaragua</option>
									<option value="Niger" >Niger</option>
									<option value="Nigeria" >Nigeria</option>
									<option value="Norway" >Norway</option>
									<option value="Oman" >Oman</option>
									<option value="Pakistan" >Pakistan</option>
									<option value="Palau" >Palau</option>
									<option value="Palestine" >Palestine</option>
									<option value="Panama" >Panama</option>
									<option value="Papua New Guinea" >Papua New Guinea</option>
									<option value="Paraguay" >Paraguay</option>
									<option value="Peru" >Peru</option>
									<option value="Philippines" >Philippines</option>
									<option value="Poland" >Poland</option>
									<option value="Portugal" >Portugal</option>
									<option value="Puerto Rico" >Puerto Rico</option>
									<option value="Qatar" >Qatar</option>
									<option value="Romania" >Romania</option>
									<option value="Russia" >Russia</option>
									<option value="Rwanda" >Rwanda</option>
									<option value="Saint Kitts and Nevis" >Saint Kitts and Nevis</option>
									<option value="Saint Lucia" >Saint Lucia</option>
									<option value="Saint Vincent and the Grenadines" >Saint Vincent and the Grenadines</option>
									<option value="Samoa" >Samoa</option>
									<option value="San Marino" >San Marino</option>
									<option value="Sao Tome and Principe" >Sao Tome and Principe</option>
									<option value="Saudi Arabia" >Saudi Arabia</option>
									<option value="Senegal" >Senegal</option>
									<option value="Serbia" >Serbia</option>
									<option value="Seychelles" >Seychelles</option>
									<option value="Sierra Leone" >Sierra Leone</option>
									<option value="Singapore" >Singapore</option>
									<option value="Slovakia" >Slovakia</option>
									<option value="Slovenia" >Slovenia</option>
									<option value="Solomon Islands" >Solomon Islands</option>
									<option value="Somalia" >Somalia</option>
									<option value="South Africa" >South Africa</option>
									<option value="Spain" >Spain</option>
									<option value="Sri Lanka" >Sri Lanka</option>
									<option value="Sudan" >Sudan</option>
									<option value="Suriname" >Suriname</option>
									<option value="Swaziland" >Swaziland</option>
									<option value="Sweden" >Sweden</option>
									<option value="Switzerland" >Switzerland</option>
									<option value="Syria" >Syria</option>
									<option value="Taiwan" >Taiwan</option>
									<option value="Tajikistan" >Tajikistan</option>
									<option value="Tanzania" >Tanzania</option>
									<option value="Thailand" >Thailand</option>
									<option value="Togo" >Togo</option>
									<option value="Tonga" >Tonga</option>
									<option value="Trinidad and Tobago" >Trinidad and Tobago</option>
									<option value="Tunisia" >Tunisia</option>
									<option value="Turkey" >Turkey</option>
									<option value="Turkmenistan" >Turkmenistan</option>
									<option value="Tuvalu" >Tuvalu</option>
									<option value="Uganda" >Uganda</option>
									<option value="Ukraine" >Ukraine</option>
									<option value="United Arab Emirates" >United Arab Emirates</option>
									<option value="United States Minor Outlying Islands" >United States Minor Outlying Islands</option>
									<option value="Uruguay" >Uruguay</option>
									<option value="Uzbekistan" >Uzbekistan</option>
									<option value="Vanuatu" >Vanuatu</option>
									<option value="Vatican City" >Vatican City</option>
									<option value="Venezuela" >Venezuela</option>
									<option value="Vietnam" >Vietnam</option>
									<option value="Virgin Islands, British" >Virgin Islands, British</option>
									<option value="Virgin Islands, U.S." >Virgin Islands, U.S.</option>
									<option value="Yemen" >Yemen</option>
									<option value="Zambia" >Zambia</option>
									<option value="Zimbabwe" >Zimbabwe</option>
							</select></div>
                        </div>
                    </fieldset>                       
					</div> <!-- .adres -->
                </div> <!-- .contact_labels -->
        </fieldset>
        	<p class="klein">* denotes a required field</p>
        <div id="afrekening">
            <p>Total:<span class="nummer" id="subtotaal">0</span></p>
            <p>Reductions:<span class="nummer" id="kortingen">0</span></p>
            <p><hr/><p></p>
            <p>Grand total:<span class="nummer" id="totaal">0</span></p>
        </div>
        <button type="submit">Make reservation</button>
        <button type="reset" onClick="resetFormulier();"> Reset</button>
    </form>

    
</div>

<footer>
	<div id="footer_menu">
        <table>
            <tr>
                <th><a href="index.html">Home</a></th>
                <th><a href="overzicht.html">Programme</a></th>
                <th><a href="contact.html">Contact</a></th>
                <th><a href="tickets.html">Tickets</a></th>
            </tr>
            <tr>
            	<td></td>
            	<td><a href="overzicht.html">Showtimes</a></td>
                <td>T: +32 16 68 23 80</td>
                <td></td>
            </tr>
            <tr>
            	<td></td>
            	<td><a href="categorie.html">Classics</a></td>
                <td>F: +32 16 68 23 90</td>
                <td></td>
            </tr>
            <tr>
            	<td></td>
            	<td><a href="categorie.html">Cult</a></td>
                <td><a href="mailto:wim.hambrouck@student.ehb.be?subject=Mail%20from%20contact%20page">Send mail</a></td>
                <td></td>
            </tr>
            <tr>
            	<td></td>
            	<td><a href="categorie.html">Popular</a></td>
                <td>Nijverheidskaai 170<br/>Anderlecht</td>
                <td></td>
            </tr>
        </table>
    	<p id="tmdb_tekst"><a href="http://www.themoviedb.org/" target="_blank"><img id="tmdb_img" alt="TMDb logo" src="beeld/TMDb.png" width="50"/></a>This product uses the TMDb API but is not endorsed or certified by TMDb.</p>
        
        <p id="film_factory_tekst">
        	<img id="film_factory_logo" alt="Film Factory logo" src="beeld/film_factory_logo.png" width="50"/>
            The Summer Film Festival is an initiative by the Film Factory.
        </p>
    </div>
</footer>

</body>
</html>
